<template>
  <div class="me-loading" :class="{'inline':inline}">
    <!-- 加载动态图片开始 -->
    <div class="img-wrapper" v-if="ifImagShow">
      <img src="./loading.gif" alt="" class="loading-image">
    </div>
    <!-- 加载动态图片结束 -->
    <!-- 加载文字开始 -->
    <div class="loading-text" v-if="ifTextShow">{{text}}</div>
    <!-- 加载文字结束 -->
  </div>
</template>
<script>
export default {
  name: 'meLoading',
  props: {
    loadingText: { // 加载文字的内容
      type: String,
      default: '正在加载中...'
    },
    ifImagShow: { // 加载图是否显示
      type: Boolean,
      default: true
    },
    ifTextShow: { // 是否显示加载的文字
      type: Boolean,
      default: true
    },
    inline: { // 加载动态图与文字是否在一行
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      text: this.loadingText
    }
  },
  watch: {
    loadingText (value) { // 即时监听加载文字的内容
      this.text = value
    }
  },
  methods: {
    setText (value) { // 改变加载文字
      this.text = value
    }
  }

}
</script>
<style lang="stylus" scoped>
.me-loading
  display flex
  align-items center
  justify-content center
  flex-direction column
  &.inline
    display flex
    flex-direction row
    .loading-text
      margin-top 0
      padding-left 6px
  .loading-text
    margin-top 10px
</style>
